<template>
    <view class="content">
      <view class="main">
        <image class="logo" src="/static/login-log.png" />
        <view class="foot">
          <view class="store">{{ store.shopName }}({{ store.shopAddress }})</view>
          <button class="btn" type="default" @click="openTheDoor">开门</button>
        </view>
      </view>

    </view>
  </template>
  <script setup>
  import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
  import { onLoad, onShow } from "@dcloudio/uni-app";
  import {getOpenDoorToken,openDoor} from '@/service/index'
  const token = ref('')
  const store = ref({})
  const getToken = (tc)=>{
    console.log(222);
    console.log("getToken tc:",tc);
    getOpenDoorToken({tc}).then(res=>{
        token.value = res
    })
  }
  const openTheDoor = ()=>{
	console.log("openTheDoor token:",token.value);
    openDoor({token:token.value}).then(res=>{
        if(res){
            uni.showToast({
            title: '开门成功',
            icon: 'none'
        })
        setTimeout(()=>{
            uni.switchTab({ url: '/pages/index/index' })
        },1500)
            
        }
        
       
    })
  }
  onLoad((options)=>{
    store.value = uni.getStorageSync('store')
	const tc = options.tc;
    getToken(tc)
  })
  </script>
  <style lang='less' scoped>
  .content {
    .main {
      position: relative;
      background-color: #fff;
      height: 100vh;
      width: 100%;
      .logo{
        position: absolute;
        top: 30%;
        width: 342rpx;
        height: 112rpx;
        left: 50%;
        transform: translateX(-50%);
      }
      .foot{
        position: absolute;
        bottom: 10%;
        padding: 0 48rpx;
        box-sizing: border-box;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        .store{
            text-align: center;
            margin-bottom: 10rpx;
        }
        .btn{
          width: 100%;
          height: 100rpx;
          background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
          border-radius: 60rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: 32rpx;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 24rpx;
        }
        .agreement{
          font-size: 28rpx;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
          .info{
            color: #009A44;
          }
          image{
            width: 36rpx;
            height: 36rpx;
            margin-right: 24rpx;
          }
        }
      }
  
    }
    .modal{
      background-color: #fff;
      padding: 30rpx;
      border-radius: 10rpx;
      width: 70%;
      margin: 0 auto;
      .title{
          margin-bottom: 100rpx;
          text-align: center;
          font-weight: 800;
        }
      .btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
       
        .btn{
          width: 40%;
  
        }
      }
    }
  }
  </style>